<template>
  <div>
    <div>
      <a-card title="文章列表" style="border:none">
      <a slot="extra" href="#">
        <a-button
          class="xlsx"
          type="primary"
          size="small"
          @click="exportExcel">
          <a-icon type="fall" />导出excel
      </a-button></a>
    </a-card>
    </div>
    <!-- 增加文章 -->
       <a-button
           type="primary"
           @click = 'addArt'
           >添加文章</a-button>
    <!-- /增加文章 -->
    <!-- 文章列表 -->
      <a-table
        :rowKey="record =>
        record.id"
        :columns="columns"
        :data-source="lists"
        :pagination="pagination"
        @change="changeSize"
      />
    <!-- /文章列表 -->
  </div>
</template>

<script>
import XLSX from 'xlsx'
import { fetchArtLists, delArt } from 'api'
import { splitStr } from 'utils/index.js'
import dayjs from 'dayjs'
import { Modal, message } from 'ant-design-vue'

export default {
  data () {
    const columns = [
      {
        title: '标题',
        dataIndex: 'title',
        key: 'title',
        scopedSlots: { customRender: 'title' }
      },
      {
        title: '作者',
        dataIndex: 'author',
        key: 'author',
        width: 80,
        scopedSlots: { customRender: 'author' }
      },
      {
        title: '描述',
        dataIndex: 'desc',
        key: 'desc',
        ellipsis: true,
        scopedSlots: {
          customRender: (text, row, index) => {
            return (
              <a-tooltip title={text}>
                <span>
                  { splitStr(text, 10) }
                </span>
              </a-tooltip>
            )
          }
        }
      },
      {
        title: '封面图片',
        dataIndex: 'thumb',
        key: 'thumb',
        ellipsis: true,
        customRender: (text, row, index) => {
          return (
            <a-avatar
              size={100}
              shape='square'
              src={text}
            />
          )
        }
      },
      {
        title: '阅读量',
        dataIndex: 'readCound',
        key: 'readCound',
        ellipsis: true,
        customRender: (text, row, index) => {
          return (
            <a-tag color={text > 300 ? 'red' : 'green'}>{text}</a-tag>
          )
        }
      },
      {
        title: '上传时间',
        dataIndex: 'createAt',
        key: 'acreateAt',
        ellipsis: true,
        customRender: (text, row, index) => {
          return (
            <span>
              {dayjs(text).format('YYYY-MM-DD')}
            </span>
          )
        }
      },
      {
        title: '操作',
        dataIndex: 'action',
        key: 'action',
        ellipsis: true,
        customRender: (text, row, index) => {
          return (
            <div>
              <a-button
                size="small"
                style={{ background: '#5e89ef', color: '#fff' }}
                onClick = { () => {
                  // 点击跳转到编辑页
                  this.$router.push(`/admin/artEdit/${row.id}`)
                } }
              >编辑</a-button>
              <a-button
                size="small"
                style={{ background: '#feb9c8', color: '#fff' }}
                onClick={() => { this.delArt(row.id) }}
              >删除</a-button>
            </div>
          )
        }
      }
    ]
    return {
      loading: true,
      pagination: {
        total: 0,
        page: 1,
        pageSize: 10, // 每页中显示10条数据
        showSizeChanger: true,
        showTotal: total => `共有 ${total} 条数据` // 分页中显示总的数据
      },
      lists: [],
      data: [], // 二维数组
      columns
    }
  },
  created () {
    this.fetchArtList()
  },
  methods: {
    // 导出excel
    exportExcel () {
    // 处理表头
    // console.log(Object.keys(this.state.lists[0])); // 返回对象中所有的属性组成一个新的数组
      const data = []
      const keys = ['序号', '标题', '作者', '描述', '封面图片', '阅读次数', '创建时间']
      data.push(keys)
      this.lists.forEach(art => {
      // art为每一条的数据
        data.push(Object.values(art))
      })
      // console.log(data)
      // 将装有excel的data赋值给上面最大的data方法
      this.data = data
      this.exportFile()
    },
    exportFile () {
      const ws = XLSX.utils.aoa_to_sheet(this.data)
      const wb = XLSX.utils.book_new()
      XLSX.utils.book_append_sheet(wb, ws, 'SheetJS')
      XLSX.writeFile(wb, '文章列表.xlsx')
    },
    fetchArtList () {
    // 请求文章列表的接口
    // 动态添加页数page，pageSize
      fetchArtLists({
        page: this.data.page,
        pageSize: this.data.pageSize
      }).then(res => {
        // 当响应状态码相同时，将值取出来
        if (res.data.code === 200) {
          this.loading = false
          // 将total总条数和lists文章列表内容取出赋值给本地
          this.pagination.total = res.data.data.total
          this.lists = res.data.data.lists
        }
      })
    },
    addArt () {
      this.$router.push('/admin/artAdd')
    },
    // 分页获取每页的数据
    changeSize () {
      this.fetchArtList()
    },
    delArt  (id) {
    // 删除文章
      Modal.confirm({
        title: '删除文章',
        content: '要删除文章咯？',
        onOk () {
          // 开始删除
          delArt(id).then(res => {
            if (res.data.code === 200) {
              message.success(res.data.msg, 2, () => {
                // this.$router.go(0)
              })
            }
          })
        },
        onCancel () {
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
#deep ant-breadcrumb{
  width: 80px;
}
</style>
